import { defineComponent, reactive } from 'vue';
import './DeckCardDetail.less';
import type { CardDetail } from '/@/api/gateruler/model/cardModel';
import { useVModels } from '@vueuse/core';
import { ConfigProvider, Popup, Rate } from 'vant';
import { CardDetailApi } from '/@/api/gateruler/card';
import { awaitWrap } from '/@/utils';
import { useOptions } from '/@/views/gateruler/hooks/useOptions';
import { find } from 'lodash-es';
import setting from '/@/settings/projectSetting';
// import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'GateRulerDeckCardDetail',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    cardId: {
      type: Number as PropType<number>,
      required: true,
    },
  },
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const { rarityOptions } = useOptions();

    const detailData = reactive<{ current: CardDetail }>({
      current: {} as CardDetail,
    });

    const getLinkCard = async () => {
      const { cardId } = props;
      detailData.current = {} as CardDetail;
      const [error, data] = await awaitWrap(CardDetailApi({ card_id: cardId }));
      if (error) {
        return false;
      }
      detailData.current = data as CardDetail;
    };

    const CardDetail = () => {
      const { current: cardDetailInfo } = detailData;

      // 稀有度
      let RarityHtml: VueNode = <span></span>;
      if (cardDetailInfo.rarity > 0) {
        RarityHtml = <Rate v-model={[cardDetailInfo.rarity]} count={cardDetailInfo.rarity} color={'#000'} />;
      } else {
        const target = find(rarityOptions, ['value', cardDetailInfo.rarity]);
        RarityHtml = <span>{target ? target.label : '-'}</span>;
      }

      // 能力
      const abilityArr = cardDetailInfo.ability ? cardDetailInfo.ability.split(',') : [];
      const abilityHtml: VueNode[] = [];
      if (abilityArr.length > 0) {
        abilityArr.map((item) => {
          abilityHtml.push(<span>{item}</span>);
        });
      }

      // 属性
      const attrArr = cardDetailInfo.attrs ? cardDetailInfo.attrs.split(',') : [];
      const attrHtml: VueNode[] = [];
      if (attrArr.length > 0) {
        attrArr.map((item) => {
          attrHtml.push(<span>{item}</span>);
        });
      }

      return (
        <div class={'card-detail-container'}>
          <div class={'image-area'}>
            <img src={cardDetailInfo.img} alt='' />
          </div>
          <div class={'card-title flex justify-between items-start'}>
            <h1 class={'card-name'}>{cardDetailInfo.name}</h1>
            <div class={'foil'}>
              <img
                src={`${setting.imgUrlCdn}card-tools/yingdiimg/gateruler/card/${
                  cardDetailInfo.is_foil ? 'flash' : 'flat'
                }.png`}
                alt=''
              />
            </div>
          </div>
          <div class={'card-subtitle text-gray-400 van-ellipsis'}>{cardDetailInfo.ename}</div>
          <div class={'card-series van-ellipsis text-gray-400 flex justify-between'}>
            <span class={'van-ellipsis'}>{cardDetailInfo.series_name}</span>
            <span> {cardDetailInfo.card_no}</span>
          </div>
          <div class={'card-rarity flex items-center justify-between'}>
            <div class={'star'}>
              {RarityHtml}
              <span class={'clazz'}>{cardDetailInfo.card_class}</span>
            </div>
            <span class={'category'}>{cardDetailInfo.card_category}</span>
          </div>
          <div class={`card-ability flex ${abilityArr.length ? '' : 'hidden'}`}>{abilityHtml}</div>
          <div class={'card-attrs flex flex-wrap'}>{attrHtml}</div>
          <div class={`rules ${cardDetailInfo.rule ? '' : 'hidden'}`}>
            <div class={'lines bg-gradient-to-r from-white via-gray-400/30 to-white w-full'} />
            <p class='rule text-xs whitespace-pre-line'>{cardDetailInfo.rule}</p>
          </div>
          <div class={`description ${cardDetailInfo.description ? '' : 'hidden'}`}>
            <p class='rule text-xs text-gray-400 whitespace-pre-line'>{cardDetailInfo.description}</p>
            <div class={'lines bg-gradient-to-r from-white via-gray-300/30 to-white w-full'} />
          </div>
          <ul class={'artist-box mt-md'}>
            <li class={'text-xs'}>
              <span>画 家</span>：{cardDetailInfo.artist || '无'}
            </li>
            <li class={'text-xs'}>
              <span>军 团</span>：{cardDetailInfo.legion || '无'}
            </li>
          </ul>
        </div>
      );
    };

    return () => (
      <ConfigProvider>
        <Popup
          v-model={[show.value, 'show']}
          class={'gateruler-deck-card-detail-popup'}
          teleport={'body'}
          round={true}
          onOpen={getLinkCard}
          closeable
        >
          <CardDetail />
        </Popup>
      </ConfigProvider>
    );
  },
});
